import 'package:fluro/fluro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app10/configs/app_style_config.dart';
import 'package:flutter_app10/models/homepage/market_block_model.dart';
import 'package:flutter_app10/pages/home/phb/phb_tabbar_view_page.dart';
import 'package:flutter_app10/routers/app_routers.dart';
import 'package:flutter_app10/routers/hb_router.dart';
import 'package:flutter_app10/view/homepage/home_menu_item_widget.dart';
import 'package:flutter_app10/view/homepage/market_block_widget.dart';
import 'package:flutter_app10/view/jk/jk_text.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

import 'messagePage/message_page.dart';


class HomePage extends StatefulWidget {
  final GlobalKey<ScaffoldState> scaffoldKey;

  const HomePage({Key key, this.scaffoldKey}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin {
  // 页面状态保持 with AutomaticKeepAliveClientMixin
  // 并且重写一下方法，返回true
  @override
  bool get wantKeepAlive => true;

  List banner = [
    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=543590345,4194139638&fm=26&gp=0.jpg",
    "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496836367,2865931019&fm=26&gp=0.jpg",
    "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3359251283,1260066373&fm=26&gp=0.jpg"
  ];

  List notice = [
    "Huobi Gloal恢复Flow充提业务",
    "ETP持仓限额更新日志",
    "关于ZKS活动奖励双倍发放的公告",
    "关于ZKS活动奖励双倍发放的公告关于ZKS活动奖励双倍发放的公告关于ZKS活动奖励双倍发放的公告"
  ];

  List martketDataSource = [
    {
      "name": "BTC/USDT",
      "applies": "1.2",
      "price": "49781.82",
    },
    {
      "name": "ETH/USDT",
      "applies": "1.95",
      "price": "1581.88",
    },
    {
      "name": "HT/USDT",
      "applies": "3.18",
      "price": "14.9261",
    },
    {
      "name": "USDT/HUSD",
      "applies": "0.56",
      "price": "1.0006",
    },
  ];

  List menusDataSource = [
    {
      "title": "邀请奖励",
      "icon": Icons.sports_basketball,
    },
    {
      "title": "充币",
      "icon": Icons.dashboard,
    },
    {
      "title": "挖矿宝",
      "icon": Icons.account_balance,
    },
    {
      "title": "ETH2.0",
      "icon": Icons.eco,
    },
    {
      "title": "联系客服",
      "icon": Icons.phone_paused_rounded,
    },
    {
      "title": "波卡生态板块",
      "icon": Icons.sanitizer,
    },
    {
      "title": "DeFi板块",
      "icon": Icons.face_outlined,
    },
    {
      "title": "HECO专区",
      "icon": Icons.g_translate_outlined,
    },
    {
      "title": "USDT合约",
      "icon": Icons.wallet_membership_rounded,
    },
    {
      "title": "积分中心",
      "icon": Icons.hd_rounded,
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppStyleConfig.backgroundColor,
      appBar: _appBar(),
      body: ListView(
        children: [
          firstCell(),
          fastBuyWidget(),
          menuWidget(),
          listWidget(),
        ],
      ),
    );
  }

  // AppBar
  Widget _appBar() {
    return AppBar(
      backgroundColor: AppStyleConfig.themColor,
      titleSpacing: 0.0,
      leading: IconButton(
        onPressed: () => widget.scaffoldKey.currentState.openDrawer(),
        icon: Container(
          width: 36,
          height: 36,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(18),
            image: DecorationImage(
              image: NetworkImage(
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1664020129,1850705140&fm=26&gp=0.jpg",
              ),
            ),
          ),
        ),
      ),
      title: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          // 跳转到搜索页
          HBRouter.navigateTo(context, AppRouters.homeSearchPage,transitionType: TransitionType.fadeIn);
        },
        child: Container(
          height: 30,
          padding: EdgeInsets.symmetric(horizontal: 10),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20), color: Colors.black12),
          child: Row(
            children: [
              Icon(Icons.search_outlined),
              Text(
                "搜索您关心的币种",
                style: TextStyle(fontSize: 12, color: Colors.grey),
              )
            ],
          ),
        ),
      ),
      actions: [
        IconButton(
            icon: Icon(
              Icons.message,
              color: Colors.white,
            ),
            onPressed: (){
              // 跳转到站内信页
              Navigator.push(
                context,
                PageRouteBuilder(
                  pageBuilder: (context, animation, secondaryAnimation) =>
                      MessagePage(),
                  transitionsBuilder:
                      (context, animation, secondaryAnimation, child) {
                    return child;
                  },
                ),
              );
            })
      ],
    );
  }

  // banner + 通知 + 行情
  Widget firstCell() {
    return Container(
      decoration: BoxDecoration(
        color: AppStyleConfig.themColor,
        borderRadius: BorderRadius.only(
          bottomRight: Radius.circular(10),
          bottomLeft: Radius.circular(10),
        ),
      ),
      child: Column(
        children: [
          bannerWidget(),
          noticeWidget(),
          marketWidget(),
        ],
      ),
    );
  }

  // 轮播图
  Widget bannerWidget() {
    return Container(
      height: 160,
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.all(10),
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(banner[index]), fit: BoxFit.cover),
                borderRadius: BorderRadius.all(
                  Radius.circular(8),
                ),
              ),
            ),
          );
        },
        itemCount: banner.length,
        autoplay: true,
        // pagination: HbSwiperPagination2(),
      ),
    );
  }

  // 通知
  Widget noticeWidget() {
    return Container(
        height: 44,
        margin: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(width: 0.5, color: Colors.white54),
          ),
        ),
        width: MediaQuery.of(
          context,
        ).size.width,
        child: Row(
          children: [
            Icon(Icons.sports_basketball, color: Colors.white),
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      height: 44,
                      alignment: Alignment(-1, 0),
                      child: JKText(
                        data: notice[index],
                        textAlign: TextAlign.left,
                        color: Colors.white,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    );
                  },
                  itemCount: notice.length,
                  scrollDirection: Axis.vertical,
                  autoplay: true,
                  loop: true,
                ),
              ),
            ),
            Icon(
              Icons.menu,
              color: Colors.white,
            ),
          ],
        ));
  }

  // 行情
  Widget marketWidget() {
    return Container(
        height: 100,
        padding: EdgeInsets.all(8.0),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) {
            return MarketBlockWidget(
              dataModel: MarketBlockModel.fromJson(martketDataSource[index]),
            );
          },
          itemCount: martketDataSource.length,
        ));
  }

  // 快捷买币
  Widget fastBuyWidget() {
    return Container(
      padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        color: Color.fromRGBO(29, 36, 52, 1),
        borderRadius: BorderRadius.circular(10.0),
      ),
      height: 78,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Icon(
                Icons.account_balance_wallet,
                color: Colors.blue,
                size: 48,
              ),
              SizedBox(
                width: 4,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  JKText(
                    data: "快捷买币",
                    color: Colors.white,
                    fontSize: 16,
                    weight: FontWeight.bold,
                  ),
                  JKText(
                    data: "支持BTC、USDT、ETH等",
                    color: Colors.grey,
                    fontSize: 12,
                  ),
                ],
              )
            ],
          ),
          Stack(
            alignment: Alignment(-1, 0),
            children: [
              Container(
                height: 40,
                width: 60,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    bottomLeft: Radius.circular(20),
                  ),
                ),
              ),
              Positioned(
                left: 10,
                child: Container(
                  width: 30,
                  height: 30,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(15.0),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.blue,
                            offset: Offset(0.0, 0.0), //阴影xy轴偏移量
                            blurRadius: 2.0, //阴影模糊程度
                            spreadRadius: 0.1 //阴影扩散程度
                            )
                      ]),
                  child: Icon(
                    Icons.arrow_forward_ios_rounded,
                    color: Colors.white,
                    size: 15,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 分类菜单
  Widget menuWidget() {
    return Container(
      height: 220,
      padding: EdgeInsets.symmetric(vertical: 10),
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        color: AppStyleConfig.themColor,
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Column(
        children: [
          Expanded(
            child: GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 5, //横轴三个子widget
                  childAspectRatio: 1.0 //宽高比为1时，子widget
                  ),
              itemBuilder: (context, index) {
                return HomeMenuItemWidget(
                  title: menusDataSource[index]["title"],
                  icon: menusDataSource[index]["icon"],
                );
              },
              itemCount: menusDataSource.length,
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 40,
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 8.0),
              decoration: BoxDecoration(
                color: Color.fromRGBO(211, 160, 76, 0.5),
                borderRadius: BorderRadius.all(
                  Radius.circular(5),
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Icon(
                        Icons.wallet_travel,
                        color: Colors.orange,
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      JKText(
                        data: "存币宝：随存随娶 安全放心",
                        color: Colors.orange,
                      ),
                    ],
                  ),
                  Icon(
                    Icons.arrow_forward_ios_rounded,
                    color: Colors.deepOrangeAccent,
                    size: 16,
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  // 榜单
  Widget listWidget() {
    return Container(
        margin: EdgeInsets.only(top: 10),
        decoration: BoxDecoration(
          color: Color.fromRGBO(29, 36, 52, 1),
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: PhbTabBarViewPage());
  }
}
